import { Fragment } from 'react';
import style from './index.module.scss';
import { useNavigate } from 'react-router-dom';

/**
 * 面包屑
 * @param className 自定义类名
 * @param items 面包屑项 { title: 'Home', className: 'test', path: '/home', href:'', onClick: () => { alert(1) }, separator: '>' }
 *                      title: 标题  className: 自定义类名  path: 路由跳转  href: 跳转到外部链接 onClick: 点击事件  separator: 分隔符
 * @param separator 分隔符
 * @returns {JSX.Element}
 */
const Breadcrumb = ({
    className = '', // 自定义类名
    items, // 面包屑项
    separator = '/', // 分隔符
}) => {
    const navigate = useNavigate();

    const handleItemClick = ({ path, href, iCallback }) => { // 点击面包屑项
        iCallback && iCallback();
        if (path) {
            navigate(path);
        } else if (href) {
            window.location.href = href;
        }
    };
    return (
        <div className={`${style.breadcrumb} ${className}`}>
            {
                (items || []).map(({
                    title, // 标题
                    className = '', // 自定义类名
                    onClick: iCallback, // 点击事件
                    path, // 路由跳转
                    href, // 跳转到外部链接
                    separator: iSeparator, // 分隔符
                }, i) => (
                    <Fragment key={i}>
                        {
                            i === 0 ? null : <div className='color-999 m-x-8'>{iSeparator || separator}</div>
                        }
                        <div
                            className={`${style.item} ${className} ${path || href || iCallback ? style.link : ''}`}
                            onClick={() => handleItemClick({ path, href, iCallback })}
                        >
                            {title}
                        </div>
                    </Fragment>
                ))
            }
        </div>
    );
};

export default Breadcrumb;
